<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<div class="clear">
    <div class="col-md-3">
        <div class="panel p">
            <div class="panel-heading p-v-xs p-h-sm"><i class="ti-eye text-primary"></i> 曝光量</div>
            <div class="text-2x font-bold" id="viewCount">${form.totalData['pv'] }
                <small class="text-muted"></small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel p">
            <div class="panel-heading p-v-xs p-h-sm">总点击量</div>
            <div class="text-2x font-bold">${form.totalData['pc'] }
                <small class="text-muted"></small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel p">
            <div class="panel-heading p-v-xs p-h-sm">点击率</div>
            <div class="text-2x font-bold">
                <c:if test="${! empty form.totalData['ctr'] }"> <fmt:formatNumber value="${form.totalData['ctr'] }"
                                                                                  maxFractionDigits="2"/>%</c:if>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel p">
            <div class="panel-heading p-v-xs p-h-sm">花费</div>
            <div class="text-2x font-bold">
                <c:if test="${! empty form.totalData['total_cost'] }">￥<fmt:formatNumber
                        value="${form.totalData['total_cost'] }" maxFractionDigits="2"/></c:if>
            </div>
        </div>
    </div>
</div>

<div class="panel-body">
    <div id="dashboardChart" style="height: 400px ">
    </div>
</div>
<table class="table table-bordered table-hover bg-white">
    <thead>
    <tr>
        <th>时间</th>
        <th>曝光量</th>
        <th>点击量</th>
        <th>点击率</th>
        <th>花费</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    <colgroup>
        <col>
        <col width="12%">
        <col width="12%">
        <col width="12%">
        <col width="12%">
        <col>
        <col>
    </colgroup>
    <tbody>
    <c:choose>
        <c:when test="${!empty form.dataList}">
            <c:forEach items="${form.dataList }" varStatus="i" var="d">
                <tr>
                    <c:if test="${empty d['date']}"><td>${d['rdate']}</td></c:if>
                    <c:if test="${!empty d['date']}"><td>${d['date']}-${fn:substring(d['date'],0,3)}59</td></c:if>
                    <td>${d['pv'] } </td>
                    <td>${d['pc'] } </td>
                    <td><fmt:formatNumber value="${d['ctr'] }" maxFractionDigits="3"/>%</td>
                    <td>￥<fmt:formatNumber value="${d['total_cost'] }" maxFractionDigits="3"/></td>
                </tr>
            </c:forEach>
        </c:when>
        <c:otherwise>
            <tr>
                <td colspan="7">
                    <div class="emp">暂无内容</div>
                </td>
            </tr>
        </c:otherwise>
    </c:choose>
    </tbody>
</table>
<script type="text/javascript">
    $(function () {




        if($('#timeChangeSelect').val()==5){
            $("#dateChoose-define").removeClass('chooseTimeNoActive');
            $("#timepickerFormFather").show();
        }else{
            $("#timepickerFormFather").hide();//默认隐藏时间,选择自定义的时候显示
        }
        $("#timeChangeSelect").change(function () {
            $("#dateChoose-define").addClass('chooseTimeNoActive');
            var time = $('#timeChangeSelect').val();
            var startTime = null;
            var endTime = null;
            if (time == 1) {
                startTime = formatDate(new Date(), 0);
                endTime = formatDate(new Date(), 0);
                $("#timepickerFormFather").hide();
            }
            if (time == 2) {
                startTime = formatDate(new Date(), 1);
                endTime = formatDate(new Date(), 1);
                $("#timepickerFormFather").hide();
            }
            if (time == 3) {
                startTime = formatDate(new Date(), 6);
                endTime = formatDate(new Date(), 0);
                $("#timepickerFormFather").hide();
            }
            if (time == 4) {
                startTime = formatDate(new Date(), 29);
                endTime = formatDate(new Date(), 0);
                $("#timepickerFormFather").hide();
            }
            if(time==5){//自定义,显示时间控件,默认当前时间
                startTime = formatDate(new Date(), 0);
                endTime = formatDate(new Date(), 0);
                $("#timepickerFormFather").show();
                $('.bs-example').css('display','inline-block');
                $("#dateChoose-define").removeClass('chooseTimeNoActive');
            }
            $("#start").val(startTime);
            $("#end").val(endTime);
        })


        $("#button").off('click').click(function () {
            var time = $('#timeChangeSelect').val();
            handleDashboard($("#start").val(), $("#end").val(), time);
        });
        var rpts = ${form.data}
        ///
        var xs = _.pluck(rpts, 'rdate')
        console.log(xs);
        var xsl = _.pluck(rpts, 'date')
        console.log(xsl);
        var times = "${form.start}";
        //渲染图表
        var chart = echarts.init(document.getElementById("dashboardChart"), 'macarons')
        var option1 = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    return times +" "+ params[0].name +'<br />' +
                            params[0].seriesName +" : "+ params[0].value+'<br />' +
                            params[1].seriesName +" : "+ params[1].value+'<br />' +
                            params[2].seriesName +" : "+ params[2].value;
                }
            },
            title: {
                text: ''
            },
            legend: {
                data: ['曝光量（次）', '点击量（次）', '总花费']
            },
            xAxis: {
                data: xsl,
                axisLabel: {
                    formatter: function (value, idx) {
                        var date = times.substring(5);
                        return idx === 0 ? date:value;
                    }
                },
                axisTick: {
                    show:false
                }
            },
            yAxis: {},
            series: [{
                name: '曝光量（次）',
                smooth: true,
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                symbolSize: 5,
                data: _.pluck(rpts, 'pv')
            }, {
                name: '点击量（次）',
                smooth: true,
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                symbolSize: 5,
                data: _.pluck(rpts, 'pc')
            }, {
                name: '总花费',
                smooth: true,
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                symbolSize: 5,
                data: _.pluck(rpts, 'total_cost')
            }]
        };
        var option2 = {
            tooltip: {
                trigger: 'axis'
            },
            title: {
                text: ''
            },
            legend: {
                data: ['曝光量（次）', '点击量（次）', '总花费']
            },
            xAxis: {
                data: xs,
                axisTick: {
                    show:false
                }
            },
            yAxis: {},
            series: [{
                name: '曝光量（次）',
                smooth: true,
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                symbolSize: 5,
                data: _.pluck(rpts, 'pv')
            }, {
                name: '点击量（次）',
                smooth: true,
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                symbolSize: 5,
                data: _.pluck(rpts, 'pc')
            }, {
                name: '总花费',
                smooth: true,
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                symbolSize: 5,
                data: _.pluck(rpts, 'total_cost')
            }]
        };
        var startTime = $("input[name='start_date']").val();
        var endTime = $("input[name='end_date']").val();
        if(startTime==endTime){
            chart.setOption(option1);
        }else{
            chart.setOption(option2);
        }
    });
</script>